﻿<html>
<head> 
    <meta charset="utf-8" />
    <script src="~/Scripts/jquery-1.8.2.min.js"></script>
    <title>自定义菜单</title>

    <script type="text/javascript">
        var _parent = new Array();
        var _childeNodes = new Array();
        $(document).ready(function () {
            $("#spanparent").hide();  //默认隐藏
            $("#spanchildnode").hide();//默认隐藏
            GetNodes();
            $('#btn_addParent').click(function () {
                var info = new Object();
                info.id = (_parent.length == 0 ? 0 : _parent[_parent.length - 1].id) * 1 + 1;
                info.name = $('#txtparent').val();
                info.type = $("#selparent").val();
                if (info.type == "view") {
                    info.url = $("#txtparentUrl").val();
                }
                else
                    info.key = "click_" + info.id;
                _parent.push(info);
                xhbl();
            });
            $('#btn_addChild').click(function () {
                var info = new Object();
                if (_childeNodes.length > 0)
                    info.id = (_childeNodes[_childeNodes.length - 1].id) * 1 + 1;
                else
                    info.id = 1;
                info.parentID = $('#selectParent').val();
                info.name = $('#txtChildNode').val();
                info.type = $("#selChildNode").val();
                if (info.type == "view") {
                    info.url = $("#txtChildNodeUrl").val();
                }
                else
                    info.key = "click_" + info.parentID + "_" + info.id;
                _childeNodes.push(info);
                xhbl();
            });
            $('#btn_remove_parentRemove').click(function () {
                for (var i = 0; i < _parent.length; i++) {
                    if (_parent[i].id == $('#remove_parent_ParentNodes').val()) {
                        _parent.remove(i);
                    }
                }
                xhbl();
            });
            $('#remove_child_ParentNodes').change(function () {
                document.getElementById("remove_child_ChildNodes").options.length = 0;
                var id = $(this).val();
                for (var i = 0; i < _childeNodes.length; i++) {
                    if (_childeNodes[i].parentID == id) {
                        $('#remove_child_ChildNodes').append("<option value='" + _childeNodes[i].id + "' >" + _childeNodes[i].name + "</option>");
                    }
                }
            });
            $('#btn_remove_childRemove').click(function () {
                var id = $('#remove_child_ChildNodes').val();
                for (var i = 0; i < _childeNodes.length; i++) {
                    if (_childeNodes[i].id == id) {
                        _childeNodes.remove(i);
                    }
                }
                xhbl();
            });
            //父级View
            $("#selparent").change(function () {
                selChange(this, "#spanparent");//"#txtparentUrl"
            });
            //子级View
            $("#selChildNode").change(function () {
                selChange(this, "#spanchildnode");// "#txtChildNodeUrl"
            });
        });

        function selChange(obj, sId) {
            if ($(obj).val() == "view") {
                $(sId).show();
            }
            else {
                $(sId).hide();
            }
        }

        //数组删除的扩展方法
        Array.prototype.remove = function (from, to) {
            var rest = this.slice((to || from) + 1 || this.length);
            this.length = from < 0 ? this.length + from : from;
            return this.push.apply(this, rest);
        };
        function xhbl() {
            GetJson();
            $('#desc').html("");
            //刷新前记录，用于还原
            var record = 0;
            switch (oldID) {
                case "div_childNode": record = $("#selectParent").val(); break;
                case "remove_parent": record = $("#remove_parent_ParentNodes").val(); break;
                case "remove_child": record = $("#remove_child_ParentNodes").val(); break;
                default: record = -1;
            }
            document.getElementById("selectParent").options.length = 0;
            document.getElementById("remove_parent_ParentNodes").options.length = 0;
            document.getElementById("remove_child_ParentNodes").options.length = 0;
            document.getElementById("remove_child_ChildNodes").options.length = 0;


            for (var i = 0; i < _parent.length; i++) {
                var parent_div = $("<div><img src='/Content/images/sub.gif' style='cursor:pointer'  />" + _parent[i].name + "</div>");
                //var parent_div = $("<div onclick=zk(this,'parent_div" + (i + 1) + "')><img src='/Content/images/add.gif' style='cursor:pointer'  />" + _parent[i].name + "</div>");
                //var hid_div = $("<ul id='parent_div" + (i + 1) + "' class='divclass'><ul/>");
                var hid_div = $("<ul id='parent_div" + (i + 1) + "' class='divclass'><ul/>");
                for (var j = 0; j < _childeNodes.length; j++) {
                    if (_parent[i].id == _childeNodes[j].parentID) {
                        var child_div = $("<li>" + _childeNodes[j].name + "</li>");
                        hid_div.append(child_div);
                        if (i == 0) {
                            $('#remove_child_ChildNodes').append("<option value=" + _childeNodes[j].id + ">" + _childeNodes[j].name + "</option>");
                        }
                    }
                }
                $('#desc').append(parent_div);
                $('#desc').append(hid_div);
                if (_parent[i].type == undefined || _parent[i].type != undefined && _parent[i].type != "view")
                    $('#selectParent').append("<option value=" + _parent[i].id + ">" + _parent[i].name + "</option>");
                $('#remove_parent_ParentNodes').append("<option value=" + _parent[i].id + ">" + _parent[i].name + "</option>");
                $('#remove_child_ParentNodes').append("<option value=" + _parent[i].id + ">" + _parent[i].name + "</option>");
            }

            //还原之前记录
            switch (oldID) {
                case "div_parent": break;
                case "div_childNode": $("#selectParent").val(record); break;
                case "remove_parent": $("#remove_parent_ParentNodes").val(record); $("#remove_parent_ParentNodes").change(); break;
                case "remove_child": $("#remove_child_ParentNodes").val(record); $("#remove_child_ParentNodes").change(); break;
            }
        }
        var oldID = 'div_parent';
        function qh(va, id) {
            $('#' + oldID).hide();
            $('#' + id).show();

            $('.xzCss').removeClass();
            $(va).addClass('xzCss');
            oldID = id;
        }
        function GetNodes() {

            $.ajax({
                url: "/manager/Menu/GetConditionalMenu",

                success: function (result) {
                    var json = JSON.parse(result);
                    json = json.menu;
                    //test
                    $('#result').html(syntaxHighlight(json));
                    var i = 0;
                    $(json).each(function (k, o) {
                        for (var m in o) {
                            for (var om = 0; om < o[m].length; om++) {
                                var obj = new Object();
                                obj.id = om; //增加一个父级ID，
                                for (var p in o[m][om]) {
                                    obj[p] = o[m][om][p]; //添加父级属性
                                }
                                _parent.push(obj);
                                if (o[m][om].sub_button != undefined) {

                                    for (var sm = 0; sm < o[m][om].sub_button.length; sm++) {
                                        var child = new Object();
                                        child.id = i;         //额外增加两个参数关联父子级
                                        child.parentID = om;
                                        for (var c in o[m][om].sub_button[sm]) {
                                            child[c] = o[m][om].sub_button[sm][c];
                                        }
                                        _childeNodes.push(child);
                                        i++;
                                    }
                                }
                            }
                        }
                    });

                    xhbl();
                }
            });
        }
        //function zk(va, id) {
        //    if (document.getElementById(id).style.display == "block") {
        //        document.getElementById(id).style.display = "none";
        //        $(va).find("img").attr("src", '/Content/images/add.gif');
        //    }
        //    else {
        //        document.getElementById(id).style.display = "block";
        //        $(va).find("img").attr("src", '/Content/images/sub.gif');
        //    }
        //}
        function CreateMenu() {
            if (confirm("确定生成菜单么，现有的菜单将被覆盖？")) {
                //连接wechat服务器上传菜单
                var json = $('#result').text();

                $.ajax({
                    url: "/manager/Menu/CreateMenu",
                    type: "POST",
                    data: json,
                    contentType: "application/json",
                    success: function (result) {
                        var jsonRes = JSON.parse(result);

                        alert(jsonRes.errmsg);
                    }
                });
            }
        }
        function GetJson() {
            var json = {};
            json.button = [];

            for (var i = 0; i < _parent.length; i++) {
                var p = {};
                for (var _p in _parent[i]) {
                    if (_p == "sub_button")//只要父级
                        p[_p] = [];
                    else
                        p[_p] = _parent[i][_p];
                }
                for (var j = 0; j < _childeNodes.length; j++) {
                    if (_parent[i].id == _childeNodes[j].parentID) {

                        var s = {};
                        for (var _c in _childeNodes[j]) {
                            s[_c] = _childeNodes[j][_c]
                        }
                        if (!p.sub_button) {
                            p.sub_button = [];
                        }
                        p.sub_button.push(s);
                    }
                }
                json.button.push(p);
            }
            $('#result').html(syntaxHighlight(json));
        }
        function syntaxHighlight(json) {
            if (typeof json != 'string') {
                json = JSON.stringify(json, undefined, 2);
            }
            json = json.replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>');
            return json.replace(/("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g, function (match) {
                var cls = 'number';
                if (/^"/.test(match)) {
                    if (/:$/.test(match)) {
                        cls = 'key';
                    } else {
                        cls = 'string';
                    }
                } else if (/true|false/.test(match)) {
                    cls = 'boolean';
                } else if (/null/.test(match)) {
                    cls = 'null';
                }
                return '<span class="' + cls + '">' + match + '</span>';
            });
        }


    </script>
    <style type="text/css">
        span {
            width: 120px;
            margin: 5px;
            cursor: pointer;
        }

        .xzCss {
            background-color: #55A3FF;
        }
        /*.divclass
        {
            display:none;
            }*/
        body {
            font-size: 12px;
        }

        #desc > div {
            padding-top: 10px;
        }

        /*格式化Json*/
        pre {
            outline: 1px solid #ccc;
            padding: 5px;
            margin: 5px;
        }

        .string {
            color: green;
        }

        .number {
            color: darkorange;
        }

        .boolean {
            color: blue;
        }

        .null {
            color: magenta;
        }

        .key {
            color: red;
        }

        /*格式化Json end*/
    </style>
</head>
<body>
    <div style="width: 260px; padding-left:200px; height: 420px; overflow-y: scroll; scrollbar-base-color: #ff6600;
        border: 1px solid; float: left;padding:20px 0 20px 20px;" id="desc">
    </div>
    <div style="float: left; margin-left: 120px;">
        <pre>
        <b class="key">注</b>：添加事件：点击后端返回信息在公众号<br />

     添加页面：点击跳转到指定的URL地址</pre>
        <div style="margin-bottom:20px;">
            <span class="xzCss" onclick="qh(this,'div_parent')">添加父节点</span><span onclick="qh(this,'div_childNode')">添加子节点</span>
            <span onclick="qh(this,'remove_parent')">删除父节点</span><span onclick="qh(this,'remove_child')">删除子节点</span>
        </div>
        <div id="div_parent">
            父节点：&nbsp;<input type="text" id="txtparent" /><br /><br /><select id="selparent"><option value="click">事件</option><option value="view">页面</option></select>
            <span id="spanparent"><input type="text" id="txtparentUrl" placeholder="http://跳转的URL地址" /></span><input type="button" id="btn_addParent" value="添加" />
        </div>
        <div id="div_childNode" style="display:none;">
            父节点：&nbsp;<select id="selectParent"></select><br /><br />
            子节点：&nbsp;<input type="text" id="txtChildNode" /><br /><br /><select id="selChildNode"><option value="click">事件</option><option value="view">页面</option></select>
            <span id="spanchildnode"><input type="text" id="txtChildNodeUrl" placeholder="http://跳转的URL地址" /></span><input type="button" id="btn_addChild" value="添加" />
        </div>
        <div id="remove_parent" style="display:none;">
            父节点：&nbsp;<select id="remove_parent_ParentNodes"></select>&nbsp;<input type="button" id="btn_remove_parentRemove" value="删除" />
        </div>
        <div id="remove_child" style="display:none;">
            父节点：&nbsp;<select id="remove_child_ParentNodes"></select>&nbsp;<br /><br />子节点：&nbsp;<select id="remove_child_ChildNodes"></select>&nbsp;<input type="button" id="btn_remove_childRemove" value="删除" />
        </div>



        <div style="margin-left:30px;margin-top:80px">
            <input type="button" id="btn_CreateMenu" value="生成菜单>>>" onclick="CreateMenu()" style="width:200px; height:50px;" />
        </div>

    </div>
    <div style="padding-right:330px;padding-top:20px;float:right;width:600px;">
        <pre id="result">
                 
            </pre>
    </div>
</body>
</html>
